<template>
  <view class="category-icon">
    <wd-icon :name="getIconName" size="20px" :color="getIconColor"></wd-icon>
  </view>
</template>

<script>
export default {
  name: "ExpenseCategoryIcon",
  props: {
    iconName: {
      type: String,
      required: true,
    },
    active: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    getIconName() {
      // 映射分类到图标名称
      const iconMap = {
        all: "view-list",
        food: "apple",
        shopping: "cart",
        transport: "dashboard",
        entertainment: "video",
        housing: "home",
        education: "edit-1",
        health: "heart",
        travel: "picture",
        other: "ellipsis",
      };

      return iconMap[this.iconName] || "question-mark";
    },
    getIconColor() {
      return this.active ? "#fff" : "#666";
    },
  },
};
</script>

<script setup>
// Vue 3 setup script
</script>

<style lang="scss" scoped>
.category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
